<!--setData :回调函数，如果singleChoice为true返回为对象，如果是false，返回为数组-->
<!--singleChoice :是否单选 true是，false否-->
<!--rootOrgId 从该机构id -->
<template>
  <div style="display: inline-block; line-height: 32px">
    <Button style="margin: 20px 0 0 5px;" class="ivu-btn-add" icon="md-add" @click="openOrgModal()">{{buttonName}}
    </Button>
    <Modal title="用户列表" v-model="modal" width="850" :footer-hide="singleChoice" :mask-closable="false">
      <Form :label-width="100" ref="formInline" :model="formInline">
        <Row :gutter="16" class="query-form2">
          <i-col span="8">
            <FormItem label="组织机构：">
              <Input class="query-form-el" v-model="formInline.companyName"></Input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="用户名称：">
              <Input class="query-form-el" v-model="formInline.userName"></Input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <div style="float: right;">
              <Button class="ivu-btn-query" icon="md-search"  @click="queryUser">查询</Button>
              <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            </div>
          </i-col>
        </Row>
      </Form>
      <Table ref='table2' height="400" :loading="loading" no-data-text="请选择查询条件!" border :height="tableHeight"
             :columns="column"  width="100%" :data="infos" size="small"></Table>
      <Row type="flex" justify="end" >
        <i-col>
          <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
        </i-col>
      </Row>
      <Form :label-width="100" v-if="!singleChoice">
        <Row style="margin-top: 10px;">
          <i-col span="24">
            <FormItem label="已选择用户">
              <TagInput ref="refTagInput" :tags="selectUsers"/>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button class="ivu-btn-save" @click="saveInfo">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import cascaderDom from "../../../components/cascader-dom.vue"
import TagInput from "@/views/safe/meeting/TagInput.vue"
import {sessionStorage} from '../../../common/cacheUtils.js';
import {Api} from '../../../api/index.js'

export default {
  name: "user-select",
  components:{TagInput,cascaderDom},
  props: {
    rootOrgId: null,
    buttonName:String,
    singleChoice: {
      type: Boolean,
      default: true
    },
  },
  data(){
    return {
      modal: false,
      formInline: {},
      loading: false,
      infos: [],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      pageSizeArray: [10, 20, 50],
      tableHeight: '',
      column: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
        },
        {
          minWidth: 100,
          title: '用户名称',
          key: 'userName',
          align: 'center',
        },
        {
          minWidth: 140,
          title: '岗位名称',
          key: 'positionName',
          align: 'center',
        },
        {
          minWidth: 180,
          title: '二级集团',
          key: 'twoLevelOrgName',
          align: 'center',
        },
        {
          minWidth: 180,
          title: '所属公司',
          key: 'companyName',
          align: 'center',
        },
        {
          minWidth: 180,
          title: '所属部门',
          key: 'orgName',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          key: 'view',
          fixed: 'right',
          minWidth: 80,
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    if(this.singleChoice){
                      this.$emit('setData', params.row);
                      this.userName = params.row.userName;
                      this.modal = false;
                    }else{
                      this.addUser(params.row);
                    }
                  }
                }
              }, '选择')
            ])
          }
        }
      ],
      selectUsers: [],
    }
  },
  mounted() {
    this.queryUser();
    this.tableHeight = window.innerHeight- 300;
  },
  methods: {
    openOrgModal(){
      this.selectUsers = [];
      this.modal = true;
      this.queryUser();
    },
    setOrgInfo(data) {
      this.formInline.orgId = data[data.length - 1];
    },
    queryUser() {
      let data = {
        fromPage: this.pagedata.currentPage,
        pageSize: this.pagedata.pageSize,

      };
      if (!this.formInline.companyName) {
        data.companyName = sessionStorage('userId').getObject('userId').companyName
      }
      data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
      this.loading = true;
      this.$http.get(Api.queryUser, {
        params: data
      }).then(res => {
        res.data.data.map(i => {
          if (i.orgInfo != null) {
            i.orgName = i.orgInfo.orgName;
            i.orgId = i.orgInfo.orgId;
            if (i.position != null) {
              i.positionId = i.position.positionId
              i.positionName = i.position.positionName
            }
          }
        })
        this.infos = res.data.data;
        this.pagedata.total = res.data.total;
        this.loading = false;
      }).catch(e => {
        this.loading = false;
        this.$Message.error('请求失败');
      })
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.queryUser();
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.queryUser();
    },
    addUser(row){
      let _this = this;
      //let userInfo = {name: row.userName, userId: row.userId};
      let exist = false;
      let userId = row.userId;
      this.selectUsers.forEach(v => {
        if (userId == v.userId) {
          exist = true;
        }
      });
      if (!exist) {
        this.$nextTick(() => {
          this.selectUsers.push(row);
        })
      }
    },
    saveInfo(){
      if(this.selectUsers!=undefined&&this.selectUsers.length!=0){
        let name = '';
        let data = [];
        this.selectUsers.forEach(v => {
          name += ',' + v.name;
          data.push(v);
        });
        this.$emit('setData', data);
        this.userName = name;
        this.modal = false;
      }else {
        this.$Message.error('请选择数据！');
      }
    },
    reset(){
      this.pagedata  = {
                total: 0,
                pageSize: 10,
                currentPage: 1
      }
      this.formInline = {};
      // this.$refs.childOrg.resetCurrentOrg();
      this.queryUser();
    }
  }
}
</script>

<style scoped>

</style>
